<template lang="pug">
  .global-container
    .global-container-header
      .title 菜单组管理
      .tools
        .search-input
          i.iconfont.icon-sousuo
          input(placeholder="菜单组名称", v-model="searchValue")
        .btn.btn-search(@click="search") 查询
        .btn.btn-add(@click="$router.push('/edit-menu')") 新增
    .global-container-content
      .content-header
        div 菜单组名称
        div 菜单组图标
        div 操作人
        div 操作时间
        div 操作
      .content-body(v-if="menuGroupList.length")
        .content-item(v-for="item in menuGroupList")
          div {{item.menuName}}
          div
            i.iconfont(:class="item.menuIcon")
          div {{item.updateUserName}}
          div {{item.updateTime}}
          .operate-group
            .text-operate(@click="$router.push(`/edit-menu/${item.menuGroupId}`)") 编辑
            .text-operate(@click="viewMenu(item.menuGroupId)") 查看子菜单
            .text-delete(@click="deleteMenuGroup(item.menuGroupId)") 删除
      template(v-if="menuGroupList.length")
        QuickPager(:page="page")
      template(v-else)
        Empty(:searched="true")
    ViewMenu(:menuGroupId="currentMenuGroupId", v-if="showViewMenu", @close="showViewMenu = false")
</template>

<script>
import ViewMenu from './ViewMenu'
export default {
  data () {
    return {
      searchValue: '',
      menuGroupList: '',
      page: {
        startIndex: 0,
        pageRows: 10,
        totalRows: 0,
        currentPage: 1
      },
      currentMenuGroupId: '',
      showViewMenu: false
    }
  },
  methods: {
    deleteMenuGroup (menuGroupId) {
      this.$store.set('dialog/operateConfirmInfo', {
        show: true,
        text: '是否确认删除当前菜单组?',
        confirmCallback: async () => {
          const {code, msg} = (await this.$http.post(`/manage/menu-group/delete-menu-group/${menuGroupId}`)).data
          if (code === 0) {
            this.$store.set('dialog/blackInfo', {
              show: true,
              text: '删除成功'
            })
          } else {
            this.$store.set('dialog/operateTipInfo', {
              show: true,
              text: msg
            })
          }
          this.init()
          this.menuFlush()
        }
      })
    },
    viewMenu (menuGroupId) {
      this.currentMenuGroupId = menuGroupId
      this.showViewMenu = true
    },
    menuFlush () {
      this.$store.set('base/menuFlush', true)
    },
    search () {
      this.page = {
        startIndex: 0,
        pageRows: 10,
        totalRows: 0,
        currentPage: 1
      }
      this.init()
    },
    async init () {
      const {data, more} = (await this.$http.post('/manage/menu-group/init-menu-group-list', {
        searchValue: this.searchValue,
        page: this.page
      })).data
      this.menuGroupList = data
      this.page = more
    }
  },
  mounted () {
    this.init()
  },
  components: {ViewMenu}
}
</script>

<style scoped>

</style>
